<template>
  <div className="Echarts">
    <div>
      <h3 style="margin-top: 1px">小果课堂</h3>
    </div>
    <div id="main" style="width: 1300px;height:550px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoList: [],
      chapter_list: [],
      num:''
    }
  },
  name: 'Echarts',
  methods: {
    //获取视频详细信息
    getVideoList() {
      console.log("video")
      this.$http.get("api/v1/pub/video/listVideo").then(res => {
        console.log(res);
        this.videoList = res.data.data;
        // 基于准备好的dom，初始化echarts实例   注意为了赋值只能将echars放到.then后
        console.log("myEcharts")
        var myChart = this.$echarts.init(document.getElementById('main'));
        var category = [];
        var lineData = [];
        var barData = [];
        for (var i = 0; i < this.videoList.length; i++) {
          category.push([
            this.videoList[i].title,
          ]);
          this.chapter_list = this.videoList[i].chapter_list;
          barData.push(this.chapter_list.length);
          this.num=0;
          for (var j=0;j<this.chapter_list.length;j++){
            this.num =this.num+this.chapter_list[j].episode_list.length;
          }
         lineData.push(this.num);
        }
            // 指定图表的配置项和数据
             var option = {
               backgroundColor: '#0f375f',
               tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                   type: 'shadow'
                 }
               },
               legend: {
                 data: ['集', '章'],
                 textStyle: {
                   color: '#ccc'
                 }
               },
               xAxis: {
                 data: category,
                 axisLine: {
                   lineStyle: {
                     color: '#ccc'
                   }
                 }
               },
               yAxis: {
                 splitLine: {show: false},
                 axisLine: {
                   lineStyle: {
                     color: '#ccc'
                   }
                 }
               },
               series: [{
                 name: '集',
                 type: 'line',
                 smooth: true,
                 showAllSymbol: true,
                 symbol: 'emptyCircle',
                 symbolSize: 15,
                 data: lineData
               }, {
                 name: '章',
                 type: 'bar',
                 barWidth: 10,
                 itemStyle: {
                   barBorderRadius: 5,
                   color: new this.$echarts.graphic.LinearGradient(
                       0, 0, 0, 1,
                       [
                         {offset: 0, color: '#14c8d4'},
                         {offset: 1, color: '#43eec6'}
                       ]
                   )
                 },
                 data: barData
               }]
             };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      })
    },
  },

  created() {
    this.getVideoList();
  }
}
</script>

<style>

</style>
